<!-- 
flex布局
    - 也称为弹性布局、弹性盒布局、伸缩布局、伸缩盒布局
    - PC端支持差，移动端支持好，IE11或更低版本不支持或仅仅部分支持
    - 原理：给父容器添加flex属性，进而控制子容器的位置、及排列方式（纵向或横向）
        采用flex布局的元素，称为flex容器（flex container），简称容器；
        它里面的所有子元素自动变为容器成员，称为flex项目（flex item），简称项目。
    - 一行显示，即：默认将子容器的行内、或块级元素转为行内块元素
    - 子容器的float、clear、vertical-align将失效


    - 布局模式：给父容器添加
        display: flex;

    - 布局方式：给父容器、或子容器添加
        父容器
            需要子容器设置宽度
            justify-content: right | left | center | spance-around | space-between |...;

        子容器
            flex: 数值;
            子容器不要设宽度，因为会根据子容器个数或所占份数去平均分配【剩余的空间】
            同一行中，不要存在块级元素，因为会占一行宽度，剩余空间将是0会与均分矛盾
            均分关系：（子容器个数 * 份数）之和 = 剩余空间
                a*1，占2份
                span*3，占1份
            每份的宽度 = 剩余空间/（1*2+3*1）= 均分5份 = 20%
 -->
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    div {
        /* 1、布局模式：弹性布局 */
        display: flex;

        /* 2.1、布局方式（父容器） */
        /* justify-content: space-between; */

        width: 80%;
        height: 300px;
        margin: 0 auto;
        background-color: cyan;
    }

    div span {
        /* 2.2、父容器的方式需要子容器设置宽度 */
        /* width: 200px; */

        /* 3.1、布局方式（子容器） */
        flex: 1;

        height: 200px;
        background-color: skyblue;
    }
    div a {
        /* 3.2、布局方式（子容器） */
        flex: 2;
        height: 200px;
        background-color: purple;
    }
</style>

<div>
    <span>1</span>
    <a href="#">跳转到百度</a>
    <span>2</span>
    <span>3</span>
</div>
